<template>
  <div class="main">
    <div class="inner">
      <div class="ImgLeft wow fadeInLeft">
        <div class="title wow fadeInDown fs-28">{{ $t('ismsg.airdrop.title') }}</div>
        <div class="times">
          <div class="name">{{ $t('ismsg.airdrop.timesName') }}</div>
          <div class="val">
            <span>{{ times.day }}</span>D
            <span>{{ times.hour }}</span>
            : <span>{{ times.min }}</span> : <span>{{ times.sec }}</span>
          </div>
        </div>
        <div class="subtitle">
          <span class="text">{{ $t('ismsg.airdrop.text1') }} </span>
          <img src="@/assets/images/logo1.png" alt="" />
          <span class="name">$AXIE</span>
          <span class="number">{{ airdropCnt }}</span>
          <span class="btn hidden-xs-only active" v-if="!hasRecieved" @click="handleRecieve">
            {{ $t('ismsg.airdrop.btn[1]') }}
          </span>
        </div>
        <div class="recieveBtn hidden-sm-and-up active" v-if="!hasRecieved" @click="handleRecieve">
          {{ $t('ismsg.airdrop.btn[1]') }}
        </div>
        <div class="invite">
          <span>{{ $t('ismsg.airdrop.inviterAddress') }} </span>
          <div class="address line-limit-length">
            <input type="text" name="" id="" v-model="myInviter" :readonly="myInviter" />
          </div>
        </div>
        <div class="invitation invite">
          <span>{{ $t('ismsg.airdrop.invitation') }} </span>
          <div class="address">
            <p class="line-limit-length">{{ myInviterAddr }}</p>
            <span class="copyBtn" v-if="myInviterAddr" @click="copy(myInviterAddr)">
              <i class="iconfont icon-fuzhi"></i>{{ $t('ismsg.airdrop.copyBtn') }}
            </span>
          </div>
        </div>
        <div class="description hidden-xs-only">
          <span>{{ $t('ismsg.airdrop.description.title') }}</span>
          <p>{{ $t('ismsg.airdrop.description.text') }}</p>
        </div>
      </div>
      <div class="ImgBox wow fadeInRight">
        <img src="@/assets/images/airdrop.png" alt="" />
      </div>
      <div class="descriptionBox hidden-sm-and-up" @click="showDialog = true">
        {{ $t('ismsg.airdrop.description.btn') }}
      </div>
    </div>
  </div>
  <div :class="{ show: showDialog }" class="pledgeDialog">
    <div class="pledgeDialogInner">
      <div class="title">
        <i class="iconfont icon-dengpao"></i> <span>{{ $t('ismsg.airdrop.description.title') }}</span>
      </div>
      <p class="subtitle">{{ $t('ismsg.airdrop.description.text') }}</p>
      <div class="confirmBtn" @click="showDialog = false">
        <span>{{ $t('ismsg.pledgeDetails.teamRules.btn') }}</span>
      </div>
      <span class="clock" @click="showDialog = false">×</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref, watch, watchEffect, getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n';
import { countTime } from '@/utils/common';
import { useMainStore } from '@/store/index';
import { util, getSigner, getBnbBalance } from '@/a-wallet';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const { proxy } = getCurrentInstance() as any;
const route = useRoute();
const mainStore = useMainStore();
const { t: lang } = useI18n();

const times = ref({ day: 1, hour: 2, min: 3, sec: 34 });
const timer: any = ref(null);
const airdropCnt = ref(0);
const airdropTime = ref('2024/4/5 21:00:00'); //截止时间
const hasRecieved = ref(false); //是否已经领取过空投
const myInviter = ref('');
const myInviterAddr = ref('');
const showDialog = ref(false);

onMounted(() => {
  getTimesVal();
  if (route.query.address) myInviter.value = route.query.address as any;

  watchEffect(async () => {
    if (mainStore.baseData) {
      getMyInviter(mainStore.baseData);
    }
  });
});

function getTimesVal() {
  const dataTime = new Date(airdropTime.value).getTime();
  const nowTime = new Date().getTime();
  if (dataTime > nowTime) {
    timer.value = setInterval(() => {
      const { d, h, m, s } = countTime(dataTime);
      times.value = { day: d, hour: h, min: m, sec: s };
      // 活动未开启显示待领取
      if (dataTime <= nowTime) {
        clearInterval(timer.value);
      }
    }, 1000);
  } else {
    times.value = { day: 0, hour: 0, min: 0, sec: 0 };
  }
}

function getMyInviter(baseData_: any) {
  myInviterAddr.value = `${window.location.origin}?address=${mainStore.walletAccount}`;
  airdropCnt.value = baseData_.airdropCnt;
  if (baseData_.inviter) {
    myInviter.value = baseData_.inviter.inviter;
  } else {
    if (myInviter.value) bindInviter();
  }
  hasRecieved.value = baseData_.airdropHistorys.length > 0;
}

/**参与空投 */
const handleRecieve = async () => {
  if (hasRecieved.value) return;
  if (mainStore.loading) return;
  const { walletAccount, baseData }: any = mainStore;

  const bnbBalance = await getBnbBalance(walletAccount);
  const amountNeed = baseData.gasFeeExtraWorth / baseData.bnbUsdtRatio;
  const gas = (baseData.gasPriceAxie1 * baseData.gasLimitAxie1) / 1e18;
  if (bnbBalance < amountNeed + gas) return ElMessage(lang('ismsg.tips.amountNotEnoughBnb'));
  mainStore.setLoading(true);
  try {
    const tx = await getSigner().sendTransaction({
      from: walletAccount,
      to: baseData.airdropAddress,
      value: util.parseEther(amountNeed.toFixed(6)),
      gasLimit: baseData.gasLimitAxie1,
      gasPrice: baseData.gasPriceAxie1.toString()
    });
    await tx.wait();
    hasRecieved.value = true;
    mainStore.setLoading(false);
    ElMessage.success(lang('ismsg.tips.airdropSuccess'));
    if (myInviter.value) bindInviter();
  } catch (error) {
    mainStore.setLoading(false);
    console.error('Error sending transaction:', error);
  }
};

/**绑定邀请人 */
async function bindInviter() {
  try {
    const response = await axios.get(
      `${proxy.$api}/invite?address=${mainStore.walletAccount}&addressTo=${myInviter.value}`
    );
    if (response.status === 200 && response.data.code === 10000) {
    }
  } catch (error) {
    console.error(error);
  }
}
const copy = (val: string) => {
  const input = document.createElement('input'); //创建input
  input.setAttribute('value', val); //把input设置value
  document.body.appendChild(input); //添加这个dom对象
  input.select(); //选中该输入框
  document.execCommand('copy'); //复制该文本
  document.body.removeChild(input); //移除输入框
  ElMessage.success(lang('ismsg.tips.copy'));
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
}

.inner {
  width: 80%;
  padding: 5%;
  margin: 0 auto;
  border-radius: 20px;
  background: url('@/assets/images/airdropBg.png') no-repeat left top;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 9;

  .title {
    font-size: 40px;
    font-weight: 700;
    font-family: MFBanHei_Noncommercial-Regular;
    background-image: linear-gradient(to bottom, #f99b36, #f35845);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 2vh;
  }

  .ImgBox {
    height: 98%;
    border-radius: 20px;
    overflow: hidden;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;

    img {
      height: 100%;
    }
  }

  .descriptionBox {
    padding: 6px 15px;
    font-size: 16px;
    border-radius: 20px;
    color: #fefefe;
    background-color: #7696cb;
    position: absolute;
    bottom: 34px;
    left: 12px;
    z-index: 5;
    font-family: MFBanHei_Noncommercial-Regular;
    cursor: pointer;
  }

  .ImgLeft {
    // width: 70%;
    position: relative;
    z-index: 9;

    .times {
      width: 489px;
      height: 123px;
      background-color: #ffffff;
      box-shadow: 0px 4px 6px 0px rgba(116, 55, 46, 0.09);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      align-items: center;

      .name {
        font-size: 20px;
        color: #ffffff;
        width: 150px;
        height: 100%;
        padding: 0 25px;
        font-weight: 600;
        background-color: #d5623d;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .val {
        color: #373737;
        font-size: 24px;
        font-weight: 700;
        padding-left: 15px;

        span {
          font-size: 42px;
        }
      }
    }

    .subtitle {
      width: fit-content;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 0;
      border-bottom: 2px solid rgba(116, 55, 46, 0.09);

      span {
        margin: 0 3px;
      }

      .text {
        color: #373737;
        font-size: 30px;
      }

      img {
        width: 37px;
      }

      .name {
        font-family: MFBanHei_Noncommercial-Regular;
        font-size: 28px;
        font-weight: bold;
        background-image: linear-gradient(to bottom, #4facfe, #00f2fe);
        -webkit-background-clip: text;
        color: transparent;
      }

      .number {
        font-family: MFBanHei_Noncommercial-Regular;
        font-size: 40px;
        letter-spacing: 3px;
        color: #ff9329;
      }

      .btn {
        font-family: MFBanHei_Noncommercial-Regular;
        font-size: 22px;
        color: #fff;
        padding: 4px 12px;
        font-weight: 600;
        background-color: #c3c3c3;
        border-radius: 20px;
        cursor: pointer;

        &.active {
          background-color: #d5623d;
        }
      }
    }

    .invite {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 1vh;

      span {
        font-family: AdobeHeitiStd-Regular;
        font-size: 18px;
        color: #3f3f3f;
        margin-right: 10px;
      }

      .address {
        width: 400px;
        padding: 5px 15px;
        border-radius: 20px;
        font-family: ArialMT;
        font-size: 14px;
        color: #572815;
        border: thin solid rgba(116, 55, 46, 0.09);
        background-color: #ffffff;
        min-height: 33px;
        input {
          width: 100%;
          height: 100%;
          border: none;
          background: transparent;
          font-family: ArialMT;
          font-size: 14px;
          color: #572815;
        }
      }

      button {
        width: 100px;
        padding: 5px 15px;
        border-radius: 20px;
        font-family: ArialMT;
        font-size: 16px;
        color: #572815;
        border: thin solid rgba(116, 55, 46, 0.09);
        background-color: #ffffff;
      }
    }

    .invitation .address {
      width: 460px;
      display: flex;
      align-items: center;

      .copyBtn {
        margin-left: 8px;
        color: #7c7c7c;
        font-size: 16px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        i {
          margin-right: 5px;
        }
      }
    }

    .description {
      margin-top: 1vh;
      max-width: 70%;
      font-family: AdobeHeitiStd-Regular;
      font-size: 16px;
      color: #ca9561;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      p {
        text-align: justify;
        margin-left: 8px;
      }
    }
  }
}

.pledgeDialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  &.show {
    z-index: 100;
    opacity: 1;
    transition: all 0.3s;
  }

  .pledgeDialogInner {
    max-width: 600px !important;
    width: 80%;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 12px;
    position: relative;

    .title {
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      line-height: 40px;
      font-family: MFBanHei_Noncommercial-Regular;
      background-image: linear-gradient(to bottom, #f99b36, #f35845);
      -webkit-background-clip: text;
      color: transparent;
      border-bottom: 2px solid rgba($color: #656565, $alpha: 0.23);

      i {
        font-size: 28px;
      }
    }

    .subtitle {
      color: #5a2a16;
      font-size: 16px;
      margin: 1vh 0;
      color: #572815;
    }

    .confirmBtn {
      text-align: center;
      margin-top: 20px;

      span {
        display: inline-block;
        padding: 10px 20px;
        background-color: #6cae86;
        border-radius: 20px;
        color: #fff;
        overflow: hidden;
        cursor: pointer;
      }
    }

    .clock {
      position: absolute;
      top: -9px;
      right: -9px;
      z-index: 100;
      display: inline-block;
      width: 20px;
      line-height: 20px;
      background-color: #fff;
      border: 1px solid #f6a526;
      border-radius: 50%;
      color: #f6a526;
      font-size: 22px;
      text-align: center;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 768px) {
  .inner {
    width: 90%;
    padding: 5% 0;
    border-radius: 20px;
    overflow: hidden;

    .ImgLeft {
      padding: 0 3%;

      .times {
        width: 100%;
        height: 75px;
        border-radius: 10px;

        .name {
          padding: 0 10px;
          width: 110px;
          font-size: 16px;
        }

        .val {
          flex: 1;
          font-size: 16px;
          padding-left: 5px;

          span {
            font-size: 24px;
          }
        }
      }

      .subtitle {
        border-bottom: none;

        .text {
          font-size: 14px;
        }

        .name {
          font-size: 20px;
        }

        .number {
          font-size: 20px;
        }
      }

      .recieveBtn {
        width: 100%;
        text-align: center;
        line-height: 48px;
        font-size: 26px;
        color: #fff;
        font-family: MFBanHei_Noncommercial-Regular;
        font-weight: 800;
        background-color: #c3c3c3;
        box-shadow: 1px 2px 11px 0px rgba(116, 55, 46, 0.11);
        border-radius: 37px;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;

        &.active {
          background-color: #d5623d;
        }
      }

      .invite {
        span {
          font-size: 16px;
        }

        .address {
          margin-top: 10px;
          width: 100%;
          font-size: 12px;
          input {
            font-size: 12px;
          }
        }
      }
    }

    .title {
      text-align: center;
      font-size: 32px;
    }

    .ImgBox {
      position: static;

      img {
        width: 80%;
        height: auto;
      }
    }
  }
}
</style>
